<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
    <title></title>
</head>
<body>

<!--页面内容开始-->
<div class="wrapper wrapper-content animated fadeInRight">
    <div class="row">
        <div class="col-3">
            <div class="ibox ">
                <div class="ibox-title">
                    <h5>部门</h5>
                </div>
                <div class="ibox-content">
                    <div id="budgetinfodetail_deptTree"></div>
                </div>
            </div>
        </div>
        <div class="col-lg-9">
            <div class="ibox ">
                <div class="ibox-title">
                    <h5>预算列表</h5>
                </div>
                <div class="ibox-content">
                    <div class="table-responsive">
                        <div class="m-l-xs toolbar" id="budgetinfodetail_toolbar">
                            <form role="form" id="budgetinfodetail_query_form" class="form-inline">
                                <div class="form-group m-r-xs">
                                    <label for="budgetinfodetail_key" class="sr-only">预算项目</label>
                                    <input type="text" class="form-control" id="budgetinfodetail_key"
                                           name="key" placeholder="预算项目/经济分类">
                                </div>
                                <div>
                                    <button class="btn btn-primary" type="button"
                                            onclick="budgetinfodetailObj.refreshTable()">查询
                                    </button>
                                    <button class="btn btn-white" type="button"
                                            onclick="budgetinfodetailObj.resetTable()">重置
                                    </button>
                                    <button class="btn btn-primary" type="button"
                                            onclick="budgetinfodetailObj.addOrUpdateHandle()">新增
                                    </button>
                                    <!--<button class="btn btn-primary" type="button"
                                            onclick="budgetinfodetailObj.importHandle()">导入
                                    </button>-->
                                </div>
                            </form>
                        </div>
                        <table id="budgetinfodetail_table" class="table table-striped"></table>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<!--页面内容结束-->
<!--弹窗：预算编辑-->
<div th:replace="web/budget/cur/budgetinfodetail-edit::budgetinfodetailEdit"></div>
<!--弹窗：预算附件-->
<div th:replace="web/budget/cur/budgetinfodetail-attach::budgetinfoetailAttach"></div>

<script type="text/javascript">
    $(function () {
        budgetinfodetailObj.initDept();
        budgetinfodetailObj.myTable = $('#budgetinfodetail_table').bootstrapTable({
            toolbar: '#budgetinfodetail_toolbar',
            pagination: true,
            sidePagination: 'server',
            method: 'post',
            formatNoMatches: function () {  //没有匹配的结果
                return '暂无数据';
            },
            queryParams: function (param) {
                param.deptCode = budgetinfodetailObj.deptCode;
                param.key = $('#budgetinfodetail_key').val()
                return param;
            },
            columns: [{
                title: '#',
                align: 'center',
                width: 50,
                checkbox: true,
                formatter: function (value, row, index) {
                    return index + 1;
                }
            }, {
                title: '预算部门',
                field: 'deptName'
            }, {
                title: '预算项目',
                field: 'projectName'
            }, {
                title: '经济分类',
                field: 'cateName'
            }, {
                title: '金额',
                field: 'money',
                formatter: function (value, row, index) {
                    return $.moneyFormat(value);
                }
            }, {
                title: '状态',
                field: 'state',
                formatter: function (value, row, index) {
                    let str = "";
                    if (row.state == 0) {
                        str = `<span class="badge badge-primary">新增</span>`;
                    } else if (row.state == 1) {
                        str = `<span class="badge badge-warning">已审核</span>`;
                    } else if (row.state == 2) {
                        str = `<span class="badge badge-success">已激活</span>`;
                    } else if (row.state == 3) {
                        str = `<span class="badge">已作废</span>`;
                    }
                    return str;
                }
            }, {
                title: '创建时间',
                field: 'createTime'
            }, {
                title: '操作',
                width: 200,
                events: {
                    'click .copy': function (e, value, row, index) {
                        budgetinfodetailEditObj.init(row.id, true)
                    },
                    'click .attach': function (e, value, row, index) {
                        budgetinfoetailAttachObj.init(row.id)
                    },
                    'click .edit': function (e, value, row, index) {
                        budgetinfodetailObj.addOrUpdateHandle(row.id)
                    },
                    'click .trash': function (e, value, row, index) {
                        budgetinfodetailObj.deleteHandle(row.id)
                    }
                },
                formatter: function (value, row, index) {
                    var opers = [];
                    opers.push(`<a class="copy btn btn-white btn-bitbucket text-success" data-toggle="tooltip" data-placement="top" title="复制">
                                    <i class="fa fa-copy"></i>
                                </a>`)
                    opers.push(`<a class="attach btn btn-white btn-bitbucket text-success" data-toggle="tooltip" data-placement="top" title="附件">
                                    <i class="fa fa-file"></i>
                                </a>`)
                    if (row.state == 0) {
                        opers.push(`<a class="edit btn btn-white btn-bitbucket text-success" data-toggle="tooltip" data-placement="top" title="编辑">
                                    <i class="fa fa-edit"></i>
                                </a>`)
                        opers.push(`<a class="trash btn btn-white btn-bitbucket text-success" data-toggle="tooltip" data-placement="top" title="删除">
                                    <i class="fa fa-trash"></i>
                                </a>`)
                    }

                    return opers.join('');
                }
            }],
            responseHandler: function (res) {
                return {
                    total: res.page.totalCount,
                    rows: res.page.list
                };
            },
            onLoadSuccess: function (data) {
                $('[data-toggle="tooltip"]').tooltip()
            }
        });
    })
    var budgetinfodetailObj = new Object({
        myTable: undefined,
        deptCode: undefined,
        deptName: undefined,
        initDept: function () {
            let _self = this;
            $('#budgetinfodetail_deptTree')
                .on('changed.jstree', function (e, data) {
                    if (data.action == 'select_node') {
                        if (!$('#budgetinfodetail_deptTree').jstree('is_parent', data.node)) {
                            _self.deptCode = data.node.a_attr.code;
                            _self.deptName = data.node.text;
                            _self.refreshTable();
                        }
                    }
                })
                .jstree({
                    "core": {
                        "animation": 0,
                        "multiple": false,
                        data: function (node, cb) {
                            $.getJSON(`/budget/tbudgetinfo/deptTree`, {}, function (data) {
                                if (data.length > 0) {
                                    data[0].state = {opened: true};
                                    data[0].type = 'root';
                                }
                                _self.priBuildTreeData(data);
                                cb(data)
                            });
                        }
                    },
                    "types": {
                        'default': {
                            'icon': 'fa fa-folder'
                        },
                        'root': {
                            'icon': 'fa fa-graduation-cap'
                        },
                        leaf: {
                            icon: 'fa fa-sitemap'
                        }
                    },
                    "plugins": [
                        "types"
                    ]
                });
        },
        priBuildTreeData: function (datas) {
            let _self = this;
            for (i in datas) {
                datas[i].a_attr = {code: datas[i].code};
                if (datas[i].children != null) {
                    _self.priBuildTreeData(datas[i].children);
                } else {
                    datas[i].type = 'leaf';
                }
            }
        },
        refreshTable () {
            let _self = this;
            this.myTable.bootstrapTable('refresh', {
                url: "/budget/tbudgetinfodetail/list",
                pageNumber: 1
            })
        },
        resetTable: function () {
            $('#budgetinfodetail_query_form')[0].reset();
            this.refreshTable();
        },
        addOrUpdateHandle: function (id) {
            let _self = this;
            if(!_self.deptCode){
                toastr.error('请选择部门', '操作失败')
                return false;
            }
            budgetinfodetailEditObj.init(id);
        },
        importHandle: function () {
            let _self = this;
            $.mySwalConfirm("将不通过选择的预算，确定吗?", function () {
                toastr.success("审核成功", '操作提示')
            });
        },
        deleteHandle: function (id) {
            let _self = this;
            let ids = id ? [id] : _self.myTable.bootstrapTable('getSelections');
            $.mySwalConfirm("将删除预算，确认吗？", function () {
                $.myDelete({
                    url: `/budget/tbudgetinfodetail/delete`,
                    dataType: 'json',
                    data: ids,
                    success: function (data) {
                        if (data && data.code === 0) {
                            toastr.success(data.msg, '操作提示')
                            _self.refreshTable();
                        } else {
                            toastr.error(data.msg, '操作失败')
                        }
                    }
                })
            });
        }
    })
</script>
</body>
</html>